<template>
  <n-layout has-sider style="height: 100%">
    <n-layout-sider bordered :width="270" :native-scrollbar="false">
      <div class="mall-info">
        <div class="mall-logo"></div>
        <div class="mall-name">村知了</div>
      </div>
      <n-menu class="mall-menu" v-model:value="activeKey" :indent="20" :render-label="renderMenuLabel"
        :render-icon="renderMenuIcon" :options="menuOptions" />
    </n-layout-sider>
    <n-layout style="background: #ededed;" :native-scrollbar="false">
      <div class="header-wrap"></div>
      <router-view />
    </n-layout>
    <div class="header-box">
      <n-popover trigger="hover" placement="bottom-start">
        <template #trigger>
          <div class="header-box-item">
            <n-icon size="24" :component="QrcodeOutlined" />
            <span class="header-box-item-text">下载APP</span>
          </div>
        </template>
        <n-image width="160" :src="qrcodeJpg" preview-disabled />
      </n-popover>
      <div class="header-box-item">
        <n-icon size="24" :component="BellOutlined" />
        <span class="header-box-item-text">通知</span>
      </div>
      <div class="header-box-item">
        <n-icon size="24" :component="CustomerServiceOutlined" />
        <span class="header-box-item-text">客服</span>
      </div>
      <div class="header-box-item" v-if="false">
        <n-icon size="24" :component="QuestionCircleOutlined" />
        <span class="header-box-item-text">帮助</span>
        <div class="triangle"></div>
      </div>
      <n-popover trigger="hover" placement="bottom-start">
        <template #trigger>
          <div class="header-box-item user-info">
            <n-avatar :src="store.userInfo.avatarUrl || logoImg" round :size="40"></n-avatar>
          </div>
        </template>
        <template #header>
          <n-text strong depth="1">
            <n-gradient-text type="info">{{ store.userInfo.name }}</n-gradient-text>
          </n-text>
        </template>
        <div class="user-wrap">
          <n-button text size="large" @click="onEditDingTalkConfig"> <template #icon>
              <n-icon size="18" :component="DingtalkOutlined" />
            </template>钉钉配置</n-button>
          <n-button text size="large" @click="onEditMysqlConfig">
            <template #icon>
              <n-icon size="18" :component="DatabaseOutlined"/>
            </template>
            Jdbc配置
          </n-button>
          <n-button text size="large" @click="onClickLogout"> <template #icon>
              <n-icon size="18" :component="LogoutOutlined" />
            </template>退出登录</n-button>
        </div>
      </n-popover>

    </div>
  </n-layout>
</template>

<script setup lang="ts">
import {
  BellOutlined,
  CustomerServiceOutlined,
  DatabaseOutlined,
  DingtalkOutlined,
  LogoutOutlined,
  QrcodeOutlined,
  QuestionCircleOutlined
} from '@vicons/antd';
import {useDialog} from 'naive-ui';
import {getCurrentInstance, h, onBeforeMount, ref} from "vue";
import {RouterLink, useRoute, useRouter} from 'vue-router';
import {useStore} from '../config/store';
import logoImg from '../assets/images/logo.png';
import qrcodeJpg from '../assets/images/qrcode.png';
import {getPathKey, menuList} from "../config/menu";

const appCom = getCurrentInstance()?.appContext?.components || {}
const activeKey = ref<string | null>(null)
const dialog = useDialog()
const store = useStore()


onBeforeMount(() => {
  activeKey.value = getPathKey(route.path)
  menuOptions.value = menuList
  store.getUserInfo();
})

const route = useRoute()
const router = useRouter()
const menuOptions = ref<any[]>();

const renderMenuLabel = (option: any) => {
  if ('href' in option) {
    return h(RouterLink, { to: option.href }, { default: () => option.label })
  }
  return option.label as string
}

const renderMenuIcon = (option: any) => {
  if ('iconName' in option) {
    return h(appCom[option.iconName])
  }
  return true;
}

const onEditDingTalkConfig = () => {
  router.push({ path: '/ding_talk' });
}

const onEditMysqlConfig = () => {
  router.push({path: '/mysql'});
}

const onClickLogout = () => {
  dialog.warning({
    title: '退出登录',
    content: '再次访问本站时，需要重新登录。 是否退出?',
    positiveText: '退出',
    negativeText: '取消',
    onPositiveClick: () => {
      store.setLogout();
      router.push({ path: '/login' });
    },
  });
}

</script>

<style lang="less" scoped>
.mall-info {
  display: flex;
  align-items: center;
  margin: 36px 16px 24px;

  .mall-logo {
    width: 40px;
    height: 40px;
    margin-left: 12px;
    margin-right: 16px;
    background-image: url(../assets/images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
  }

  .mall-name {
    font-size: 18px;
    font-weight: bold;
  }
}

.mall-menu {
  padding-left: 12px;
}

.header-wrap {
  height: 48px;
}

.header-box {
  background-color: #fff;
  position: fixed;
  top: 16px;
  right: 24px;
  width: auto;
  height: 48px;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 8px 24px 24px 8px;
  box-shadow: 2px 1px 8px 1px rgb(228 232 235);
  padding-left: 4px;

  .header-box-item {
    position: relative;
    cursor: pointer;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    padding: 0 18px;
    margin: 0 4px;
    border-radius: 4px;

    &:hover {
      background-color: rgba(219, 219, 219, 0.23);
    }

    .header-box-item-text {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #000000;
      letter-spacing: 0;
    }

    .triangle {
      height: 0;
      width: 0;
      border: 5px solid #fff;
      border-top-color: #474747;
      transform: translateY(3px);
      margin-left: 8px;
    }

  }

  .user-info {
    padding: 0px;
    position: relative;
    cursor: default;
  }

}

.header-box> :not(:nth-last-child(-n+2)):after {
  content: "";
  display: inline-block;
  height: 16px;
  width: 1px;
  background-color: #e7e7e7;
  transform: translateX(22px);
}


.user-wrap {
  display: flex;
  flex-direction: column;
}
</style>
